/**
 * 象形符号等级专题图
 * 说明：表达意义同等级符号专题图，符号不再是圆，
 * 而是根据指标进行推荐响应的图形，如人口数用人
 * 展示，企业数用企业图表展示等
 */
import colorPicker from './echarts.colorpicker'; // 颜色初始化配置文件
import sgisLayerBase from '../../sgis.layer.base';
import styleModify from './echarts.stylemodify'; // 设置图层的透明度，可见性，Zindex等引入
export default {
  activeMap: {}, // 当前活动地图
  pictogramLayer: {},
  pictogramLayerInfo: {}, // 图层其他相关信息
  /**
   * 创建地图折形图专题图
   */
  createLayer(map, data) {
    if (!map) {
      return;
    }
    if (!data) {
      return;
    }
    this.activeMap = map;
    const symbol = data.image ? ('image://' + data.image) : '';
    const option = {
      color: colorPicker.color,
      title: {
        text: data.title ? data.title : '',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter(a) {
          return `${a.name}: ${a.value[2]}`;
        }
      },
      series: [{
        name: data.name ? data.name : '',
        type: 'scatter',
        coordinateSystem: 'leaflet',
        symbol,
        data: data.data,
        symbolSize(val) {
          const size = data.iconSize ? data.iconSize : 5;
          return val[2] / size;
        },
        label: {
          show: true,
          position: 'bottom',
          color: data.color ? data.color : (colorPicker.pictogram.itemColor ? colorPicker.pictogram.itemColor : '#fff'),
          formatter: '{b}'
        },
        itemStyle: {
          color: data.color ? data.color : colorPicker.pictogram.itemColor,
          opacity: data.opacity ? data.opacity : 1
        }
      }]
    };
    this.echartOption = {
      ...option
    }; // 记录echartOption,方便自定义颜色
    this.pictogramLayer = L.supermap.echartsLayer(option).addTo(map);
    this.pictogramLayer.setCustomColor = this.setCustomColor;
    this.pictogramLayer.setOpacity = this.setOpacity; // 设置图层透明度;
    this.pictogramLayer.setVisible = this.setVisible; // 设置图层可见性;
    this.pictogramLayer.setZIndexOffset = this.setZIndexOffset; // 设置调整图层顺序函数;
    const layerId = data.id + +new Date();
    styleModify.onZoomScatter(map, this.pictogramLayer, layerId); // 等级符号图当地图放大缩小时会重新设置可见性，故有此语句
    this.pictogramLayer.layerId = layerId;
    this.pictogramLayer.autoCalgraph = this.autoCalgraph;
    this.pictogramLayer._echartsContainer.style.zIndex = styleModify.curZindex; // 为设置图层顺序调整特意设置;
    styleModify.layerOrder[layerId] = styleModify.curZindex;
    styleModify.curZindex -= 1;
    const pictogramlayerInfo = {
      layer: this.pictogramLayer,
      layerId,
      show: data.showThumbnails !== false,
      html: this.calgraph(layerId, data),
      name: data.name,
      type: "pictogram"
      // otherLayer: initLayer
    };
    this.pictogramLayerInfo = pictogramlayerInfo;
    sgisLayerBase.setOverLayers(pictogramlayerInfo);
    return pictogramlayerInfo;
  },
  /**
   * 聚集图自定义颜色设置
   * @param {object} par{
   *  clusterStyle:{
   * color:
   * borderColor:
   * }
   * }
   */
  setCustomColor(laryer, pars) {
    const echart = laryer._ec;
    const par = {
      ...pars,
      pictogramStyle: {
        color: pars.colors[0],
        borderColor: pars.colors[0]
        // shadowColor: pars.colors[2]
      }
    };
    const option = {
      ...echart.getOption()
    };
    option.series[0].itemStyle.color = par.pictogramStyle.color;
    option.series[0].label.color = par.pictogramStyle.color;
    option.color.push(par.pictogramStyle.color);
    echart.setOption(option);
    laryer.autoCalgraph(laryer.layerId, pars.colors, option.series[0].symbol);
  },
  /* *格式化数据
   * @params layerId 图层id
   */
  calgraph(layerId, data) {
    let html = `<div style="padding:10px" class="${layerId}">`;
    const color = {
      color: data.color ? data.color : (colorPicker.pictogram.itemColor ? colorPicker.pictogram.itemColor : '#fff'),
    };
    if (data.image) {
      color.image = data.image;
    }
    // if (color.hasOwnProperty('color')) {
    //   html += `<div>
    //     <div style='display:inline-block;width:20px;height:20px;background:${color.color}'></div>
    //     <div style='display:inline-block;line-height:20px;padding-left:10px;transform:translateY(-5px)'>文本</div>
    //   </div>`;
    // }
    if (color.hasOwnProperty('image')) {
      html += `<div style='line-height:35px'>
        <image style='display:inline-block;width:20px;' src='${color.image}'></image>
        <div style='display:inline-block;line-height:30px;padding-left:10px;transform:translateY(-5px)'>等级符号</div>
      </div>`;
    } else {
      html += `<div style='line-height:35px'>
      <div style='display:inline-block;width:20px;height:20px;background:${color.color};border-radius:50px;'></div>
      <div style='display:inline-block;line-height:20px;padding-left:15px;transform:translateY(-5px)'>等级符号</div>
    </div>`;
    }
    html += '</div>';
    return html;
  },
  /* *格式化数据
   * @params layerId 图层id
   */
  autoCalgraph(layerId, colors, symbol) {
    let html = `<div style="padding:10px" id="${layerId}">`;
    // html += `<div>
    //     <div style='display:inline-block;width:20px;height:20px;background:${colors[0]}'></div>
    //     <div style='display:inline-block;line-height:30px;padding-left:15px;transform:translateY(-5px)'>文本</div>
    //   </div>
    //   `;
    if (symbol) {
      symbol = symbol.slice(8);
      html += `<div style='line-height:35px'>
        <image style='display:inline-block;width:20px;' src='${symbol}'></image>
        <div style='display:inline-block;line-height:30px;padding-left:10px;transform:translateY(-5px)'>等级符号</div>
      </div>`;
    } else {
      html += `<div style='line-height:35px'>
      < div style = 'display:inline-block;width:20px;height:20px;background:${colors[0]};border-radius:50px;' > < /div>
      <div style='display:inline-block;line-height:20px;padding-left:15px;transform:translateY(-5px)'>等级符号</div>
    </div>`;
    }
    html += '</div>';
    const layers = sgisLayerBase.overLayers;
    for (const key in layers) {
      if (layers[key].layerId === layerId) {
        layers[key].html = html;
      }
    }
    // sgisLayerBase.layerControlChange();
  },
  /* *设置图层透明度 */
  setOpacity(opacity) {
    this._echartsContainer.style.opacity = opacity;
  },
  /* *设置图层可见性 */
  setVisible(visible) {
    styleModify.setScatterVisible(visible, this.layerId, this._echartsContainer);
  },
  /** 设置调整图层顺序函数*/
  setZIndexOffset(index) {
    styleModify.setZIndexOffset(index, this.layerId, this._echartsContainer);
  }
};
